<template>
  <div>
    <Row :gutter="24">
      <Col span="7">
      <div>
        <Input v-width="250" type="text" v-model="keyWord" placeholder="请输入关键词内容" @on-enter="enterSearch" clearable
          @on-clear="enterSearch"></Input>
      </div>
      </Col>
      <Col span="12">
      <Button type="primary" @click="addData">新增</Button>
      <Button style="margin-left: 15px;" type="primary" :disabled="social.length===0" @click="deleteData">删除</Button>
      </Col>
    </Row>
    <div>
      <CheckboxGroup v-model="social" @on-change="changeBox">
        <Checkbox :label="item.id" v-for="(item,index) in allData" :key="index">
          <span>{{item.quotes}}</span>
        </Checkbox>
      </CheckboxGroup>
    </div>
    <div class="ivu-mt ivu-text-center">
      <Page show-total show-elevator show-sizer :total="total" :current.sync="pageParams.page"
        :page-size="pageParams.pageSize" :page-size-opts="pageOpts" @on-change="changePageSize"
        @on-page-size-change="formChangePage" />
    </div>
    <Modal v-model="modal" title="新增" :mask-closable="false" @on-cancel="cancel">
      <Input v-model="value" type="textarea" :autosize="{minRows: 5,maxRows:10}"
        placeholder="请输入内容，支持批量，多条录入请换行，每条不超过27个字数"></Input>
      <div slot="footer">
        <Button @click="cancel">取消</Button>
        <Button type="primary" @click="submitParams" :loading="subLoading">确定</Button>
      </div>
    </Modal>
  </div>
  </div>
</template>
<script>
  import { calendarList, deleteCalendar, SetCalendar } from "@api/TApi"
  export default {
    data() {
      return {
        keyWord: "",
        modal: false,
        subLoading: false,
        value: "",
        pageOpts: [10, 15, 20, 30, 50], // 分页每页数量
        total: 0,
        allData: [],
        pageParams: {
          page: 1,
          pageSize: 10,
        },
        social: [],
      }
    },
    methods: {
      deleteData() {
        this.$Modal.confirm({
          title: '删除提示',
          content: '<p>是否确认删除已选内容，删除后无法恢复</p>',
          onOk: () => {
            deleteCalendar({ id: this.social.join(',') }).then(res => {
              this.social = []
              this.$Message.success('删除成功');
              this._calendarList()
            })
          },
        });
      },
      cancel() {
        this.value = ""
        this.modal = false
      },
      submitParams() {
        if (!this.value) {
          this.$Message.error(`请输入至少一条`)
          return false
        }
        let snsArr = this.value.split(/[(\r\n)\r\n]+/);
        for (let i in snsArr) {
          let str = snsArr[i]
          if (str.length > 27) {

            this.$Message.error(`第${Number(i) + Number(1)}条数据超过27个字符`)
            return false
          }
        }
        this.subLoading = true
        SetCalendar({ content: this.value }).then(res => {
          this.$Message.success(`新增成功`)
          this.value = ""
          this._calendarList()
          this.modal = false
        }).finally(() => {
          this.subLoading = false
        })
      },
      addData() {
        this.modal = true
      },
      enterSearch() {
        this.pageParams.page = 1;
        this._calendarList();
      },
      changePageSize(e) {
        this.pageParams.page = e;
        this._calendarList();
      },
      /* @函数功能: 每页数量 */
      formChangePage(e) {
        this.pageParams.pageSize = e;
        this._calendarList();
      },
      changeBox() {
        // console.log(this.social)
      },
      _calendarList() {
        let params = {
          keyword: this.keyWord,
          page: this.pageParams.page,
          pageSize: this.pageParams.pageSize,
        }
        calendarList(params).then(res => {
          this.total = res.total
          this.allData = res.list
        })
      }
    },
    created() {
      this._calendarList()
    }
  }
</script>
<style scoped lang="less">
  /deep/.ivu-checkbox-wrapper {
    display: block !important;
    margin-top: 20px !important;
  }
</style>